﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Chat Application</title>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/jquery.pnotify.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.timeago.js" type="text/javascript"></script>
    <link href="Styles/jquery.pnotify.default.css" rel="stylesheet" type="text/css" />
    <!--<script src="Scripts/jquery.blockUI.js" type="text/javascript"></script>-->
    <!--<script src="Scripts/jquery-ui.js" type="text/javascript"></script>-->
    <link href="Styles/jquery-ui.css.css" rel="stylesheet" type="text/css" />
    <link href="Styles/jquery.pnotify.default.icons.css" rel="stylesheet" type="text/css" />

    <!--<link href="Styles/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />-->
    <style type="text/css">
			/* <![CDATA[ */
			html, body {
				font-family: "lucida grande", tahoma, verdana, arial, sans-serif;  
				font-size: 12px;  
				color: #333333;  
			}
			
			.wrapper {
				background: transparent url(includes/watermark-small.png) no-repeat fixed bottom right;
				padding: 10px;
			}
			.wrapper.background {
				background: transparent url(includes/hoot.jpg) repeat scroll top center;
				/* http://www.flickr.com/photos/barloventomagico/2435316564/ */
			}
			.wrapper.background, .wrapper.background a, .wrapper.background .ui-widget-content {
				color: white;
				text-shadow: 2px 2px 1px black;
			}
			#header {
				height: 68px;
				position: relative;
			}
			#switcher-container {
				position: absolute;
				top: 5px;
				right: 5px;
			}
			#header img.header {
				position: absolute;
			}
			#header h1.header {
				text-align: center;
			}
			.main-description {
				font-size: 1.2em;
			}
			h2 {
				margin: .83em 0 .1em 0;
			}
			p {
				margin: 1em 0 .5em 0;
			}
			.featurelist {
				background: transparent none no-repeat 0 0 !important;
				margin: .5em 10px .5em 0;
				padding: .5em;
				float: left;
			}
			.featurelist ul {
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			.featurelist ul a {
				text-decoration: underline !important;
			}
			.featurelist ul .ui-icon {
				display: inline-block;
				position: relative;
				top: 4px;
				margin-right: .3em;
			}
			.featurelist ul img {
				vertical-align: middle;
				border: none 0;
			}
			.pf-group {
				background: transparent none no-repeat 0 0 !important;
				padding: 4px;
				margin: 5px auto;
			}
			.ui-widget {
				font-size: 75% !important;
			}
			.pf-group input.ui-button {
				padding: 2px !important;
				font-size: .92em !important;
				margin-bottom: 3px;
			}

			/* Source View */
			.source-dialog pre {
				border: 1px solid black;
				margin: .5em .5em 1em;
				padding: 1em;
				background: beige;
				color: midnightblue;
				display:-moz-inline-stack;
				display:inline-block;
				zoom:1;
				*display:inline;
			}
			.source-dialog > div {
				border-top: 1px solid black;
				border-bottom: 1px solid black;
				margin-bottom: 1em;
				display:-moz-inline-stack;
				display:inline-block;
				zoom:1;
				*display:inline;
			}
			.source-dialog > div div.syntaxhighlighter {
				overflow: visible !important;
				width: auto !important;
				display:-moz-inline-stack;
				display:inline-block;
				zoom:1;
				*display:inline;
			}

			/* Custom styled notice CSS */
			.ui-pnotify.custom {
				font-family: Arial, Helvetica, sans-serif;
				text-shadow: 2px 2px 3px black;
				font-size: 10pt;
			}
			.ui-pnotify.custom .ui-pnotify-container {
				background-color: #404040;
				background-image: none;
				border: none;
				-moz-border-radius: 10px;
				-webkit-border-radius: 10px;
				border-radius: 10px;
			}
			.ui-pnotify.custom .ui-pnotify-title {
				font-weight: bold;
				padding-left: 50px;
				color: #FFF;
			}
			.ui-pnotify.custom .ui-pnotify-text {
				padding-left: 50px;
				color: #FFF;
			}
			.ui-pnotify.custom .ui-pnotify-closer {
				position: absolute;
				bottom: 5px;
				right: 5px;
			}
			.ui-pnotify.custom .ui-pnotify-icon {
				float: left;
			}
			.ui-pnotify.custom .picon {
				margin: 3px;
				width: 33px;
				height: 33px;
			}

			/* Alternate stack initial positioning. */
			.ui-pnotify.stack-topleft {
				top: 15px;
				left: 15px;
				right: auto;
			}
			.ui-pnotify.stack-bottomleft {
				bottom: 15px;
				left: 15px;
				top: auto;
				right: auto;
			}
			/* This one is done through code, to show how it is done. Look down
			   at the stack_bottomright variable in the JavaScript below. */
			.ui-pnotify.stack-bottomright {
				/* These are just CSS default values to reset the pnotify CSS. */
				right: auto;
				top: auto;
			}
			.ui-pnotify.stack-custom {
				/* Custom values have to be in pixels, because the code parses them. */
				top: 200px;
				left: 200px;
				right: auto;
			}
			.ui-pnotify.stack-custom2 {
				top: auto;
				left: auto;
				bottom: 200px;
				right: 200px;
			}
			/* ]]> */
		</style>

        <style type="text/css">
            #txtUserName,#txtPassword
            {
                width:100%
                }
            {
                
                }
            #divAnonymousUser
            {
                background-color: #f7f7f7;  
    border: 1px solid #cccccc;  
    color: #333333;  
    padding: 10px;  
    font-size: 13px;  
    font-weight: bold;  
    height:100px;
    width:500px;                
    position:relative;
    left:50%;    
    margin-left:-250px;
    margin-top:100px;        
                }
                #divAnonymousUser>table
                {
                    width:100%;
                    }
                         
                             
                         
                
            .Message{}
            .Message>.user{}
            .Message>.time
            {
               color: #999;
font-size: 9px;
padding: 2px;
                }
            .Message>.content{}
            #divAdmin
            {
                    background-color: #eceff6;  
    border: 1px solid #d4dae8;  
    color: #333333;  
    padding: 10px;  
    font-size: 13px;  
    font-weight: bold;
                }
            #divWelcomeText
            {
                background-color: #f7f7f7;  
    border: 1px solid #cccccc;  
    color: #333333;  
    padding: 10px;  
    font-size: 13px;  
    font-weight: bold;  
    margin: 0px 0px 10px 0px;
                }
            #divChat
            {
                width:100%;
                display:table;
                padding:2px 2px 2px 2px ;
                }
        #divChat>span
        {
            width:100%;
            display:table-cell;
            
            }
            #divChat>span>input{width:100%;}
            #btnSendMessage
            {
                margin: 2px 2px 2px 10px;
                }
                #divVideo
                {
                    height:480px;
                    width:100%;
                    }
        </style>
<script type="text/javascript" >
    $.ajaxSetup({
        "error": function () {           

            $.pnotify({
                pnotify_text: 'An unknown error occurred. Please refresh the page or contact the system administrator',
                pnotify_type: 'error',                
                pnotify_hide: false
            });
         }
    });
    var Chat = {
        UserID: 0,
        UserName: "",
        LastMessageID: 0,
        DoLogin: function () {
            //    
            //            $('#divAnonymousUser').block({
            //                message: '<h1>Signing in. Please wait</h1>',
            //                css: { border: '3px solid #a00' }
            //            });

            //$.blockUI();

            $("#btnLogin").attr('disabled', 'disabled');
            $("#btnLogin").unbind("click", Chat.DoLogin);

            var u = $("#txtUserName").val();
            var p = $("#txtPassword").val();

            jQuery.ajax({
                type: "GET",
                url: "chatHandler.ashx?type=login",
                data: { u: u, p: p },
                success: function (o) {
                    if (o.IsAuthenticated) {
                        Chat.UserID = o.UserID;
                        Chat.UserName = o.UserName;
                        $("#divAnonymousUser").hide();

                        if (o.IsAdmin) {
                            $("#divWelcomeText").html("Welcome <b>Admin</b>").show();
                            $("#divAdmin").show();
                            Chat.Fetch();
                        }
                        else {
                            $("#divWelcomeText").html("Welcome " + Chat.UserName).show();
                            $("#divRegisterUser").show();
                            $("#txtMessage").focus();
                        }
                    }
                    else {
                        //$.pnotify("Mesaage sent");

                        $.pnotify({
                            pnotify_title: '',
                            pnotify_text: 'Invalid Login',
                            pnotify_type: 'error',
                            pnotify_error_icon: ''
                        });
                        //alert("Invalid Login");
                    }
                },
                dataType: "json",
                complete: function () {
                    $("#btnLogin").removeAttr("disabled");
                    $("#btnLogin").bind("click", Chat.DoLogin);
                }
            });




            //            $.getJSON("chatHandler.ashx?type=login", { u: u, p: p }, function (o) {
            //                //$.unblockUI();               

            //                if (o.IsAuthenticated) {
            //                    Chat.UserID = o.UserID;
            //                    Chat.UserName = o.UserName;
            //                    $("#divAnonymousUser").hide();

            //                    if (o.IsAdmin) {
            //                        $("#divWelcomeText").html("Welcome <b>Admin</b>").show();
            //                        $("#divAdmin").show();
            //                        Chat.Fetch();
            //                    }
            //                    else {
            //                        $("#divWelcomeText").html("Welcome " + Chat.UserName).show();
            //                        $("#divRegisterUser").show();
            //                        $("#txtMessage").focus();
            //                    }
            //                }
            //                else {
            //                    //$.pnotify("Mesaage sent");

            //                    $.pnotify({
            //                        pnotify_title: '',
            //                        pnotify_text: 'Invalid Login',
            //                        pnotify_type: 'error',
            //                        pnotify_error_icon: ''
            //                    });
            //                    //alert("Invalid Login");
            //                }
            //            }).complete(function () {
            //                $("#btnLogin").removeAttr("disabled");
            //                $("#btnLogin").bind("click", Chat.DoLogin);
            //            });
        },
        PostChat: function () {
            //$.blockUI();

            $("#btnSendMessage").attr('disabled', 'disabled');
            $("#btnSendMessage").unbind("click", Chat.PostChat);

            var m = $("#txtMessage").val();

            jQuery.ajax({
                type: "GET",
                url: "chatHandler.ashx?type=postchat",
                data: { u: Chat.UserID, m: m },
                success: function (o) {
                    if (o.Sent) {
                        $.pnotify("Mesaage sent");
                        $("#txtMessage").val("");
                    }
                    else {
                        $.pnotify({
                            pnotify_text: 'Send Message failed',
                            pnotify_type: 'error',
                            pnotify_error_icon: ''
                        });
                    }
                },
                dataType: "json",
                complete: function () {
                    $("#btnSendMessage").removeAttr("disabled");
                    $("#btnSendMessage").bind("click", Chat.PostChat);
                    $("#txtMessage").focus();
                }
            });

            //            $.getJSON("chatHandler.ashx?type=postchat", { u: Chat.UserID, m: m }, function (o) {

            //                
            //            }).complete(function () {
            //                alert("fads");
            //                
            //            });

        },
        Fetch: function () {
            $.getJSON("chatHandler.ashx?type=fetch", { u: Chat.UserID, l: Chat.LastMessageID }, function (o) {
                try { 
                    $.each(o.Messages, function (e, v) {
                        var messageContent = $("<span></span>").addClass("content").text(v.Content);
                        var timeElement = $("<span></span>").attr("title", v.SentAt).addClass("time").text("(" + v.SentAtString + ")").timeago();
                        
                        var userElement = $("<span></span>").addClass("user").text(v.UserName);
                        var messageElementToCreate = $("<div></div>").addClass("Message").append(userElement).append(timeElement).append(" : ").append(messageContent);
                        $("#divMessages").prepend(messageElementToCreate);
                    });
                    if (o.LastMessageID > 0) {
                        Chat.LastMessageID = o.LastMessageID;
                    }

                    setTimeout(Chat.Fetch, 0);
                }
                catch (e) {
                    $.pnotify({
                        pnotify_text: 'An unknown error occurred while fetching results from the server. Please refresh the page or contact the system administrator',
                        pnotify_type: 'error',
                        pnotify_hide: false
                    });
                }
                
            });
        }
    };


    $(function () {
        //functions to perform after page load
        $("#btnLogin").click(Chat.DoLogin);
        $("#btnSendMessage").click(Chat.PostChat);

        $("#txtUserName").focus();


        $("#txtUserName,#txtPassword").keypress(function (event) {
            var keycode = (event.keyCode ? event.keyCode : event.which);
            if (keycode == '13') {
                $("#btnLogin").click();
            }
        });

        $("#txtMessage").keypress(function (event) {
            var keycode = (event.keyCode ? event.keyCode : event.which);
            if (keycode == '13') {
                $("#btnSendMessage").click();
            }
        });
    });



</script>
</head>
<body>
<div id="divAnonymousUser">
<table>
<tr><td>
<label for="txtUserName" >User Name</label>
</td><td>
<span><input type="text" id="txtUserName" /></span>
</td></tr>

<tr><td>
<label for="txtPassword" >Password</label>
</td><td>
<span><input type="password" id="txtPassword" /></span>
</td></tr>
<tr>
<td>&nbsp;</td>
<td><input type="button" id ="btnLogin" value="Login" /></td>
</tr>
</table>
</div>

<br />


<div id="divWelcomeText" style="display:none"></div>



<div id="divRegisterUser" style="display:none">

<div id="divVideo">
This is the video player pane
</div>
Type your message here
<div id="divChat">
<!--This is the chat pane
<br />-->
<span><input type="text" id="txtMessage" /></span>
<input type="button" id="btnSendMessage"  value="Send" />

</div>
</div>


<div id="divAdmin" style="display:none">

<div id="divMessages">

</div>
</div>

</body>
</html>
